<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鼠标跟随</title>
</head>
<style>
  body{
    position: relative;
  }
  img{
    position: absolute;
  }
</style>
<body>
  <img src="../image/angel.gif" alt="">
  <button class="btn">get请求</button>


  <script src="./jquery-3.6.0/jQuery3.6.js"></script>
  <script type="text/javascript">
    // document.addEventListener('mousemove', function(e){
    //   var img = document.getElementsByTagName('img')[0];
    //   img.style.top = e.pageY + 'px';
    //   img.style.left = e.pageX + 'px';
    // })

    $(function(){
      // 获取图片
      var angel = $('img')
      // 步骤1.定义节流阀
      var timer = null
      // 绑定mousemove事件
      $(document).on('mousemove', function(e){
        if(timer){return}
        // 设置图片的位置
        timer = setTimeout(() => {
          $(angel).css('top', e.pageY + 'px').css('left', e.pageX + 'px');
          timer = null
        }, 32);
      })

      $('.btn').on('click', function(){
        $.ajax({
          method: 'get',
          url: 'http://www.liulongbin.top:3006/api/getbooks',
          success: function(res){
            console.log(res);
          }
        })
      })
    })
  </script>
</body>
</html>